<template>

  <div class="us">
    <head-img :url="url" :font="font" :title="title" @jumpsTo="jumpsTo"></head-img>

    <div class="main">
      <h3 id="aboutus"> 
        <i class="el-icon-position"></i>联系我们
      </h3>
      <div class="contact">
        <baidu-map
          class="bmView "
          :scroll-wheel-zoom="true"
          :center="location"
          @ready="handler"
          @click="getLocationPoint"
          :zoom="zoom"
          ak="WFOHxxeHmZEoXSujMXq9Eeq6GIP1dv8D"
        >
          <bm-view style="width: 100%; height:100%; flex: 1"></bm-view>
          <bm-marker :position="location"  :zoom="zoom" :zIndex="9999"></bm-marker>
        </baidu-map>

        <div class="usinfo" ref="userInfo">
          <h5
            style="color: #0095ff;
                font-size: 24px;
                cursor: pointer;
                border-bottom: 1px solid;"
          >猿e科技</h5>
          <h5>
            <span>邮箱:</span> 1374543195@qq.com
          </h5>
          <h5>
            <span>电话:</span> 15071384121
          </h5>
          <h5>
            <span>地址:</span> 武汉市东湖新技术开发区
          </h5>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import headImg from "../components/head-img";
import BaiduMap from "vue-baidu-map/components/map/Map.vue";
import BmView from "vue-baidu-map/components/map/MapView.vue";
import BmMarker from "vue-baidu-map/components/overlays/Marker";

export default {
  data() {
    return {
      url: require("../assets/images/big-img.jpg"),
      font:
        "engage in internet products R&D and service, and provide applicable solutions to enterprises",
      title: "专注互联网应用技术研发，为企业提供互联网应用一站式解决方案",
      location: {
        lng: 114.44462,
        lat: 30.524687,
      },
      zoom: 12.8,
    };
  },
  mounted(){
    //注册监听动画的事件
    window.addEventListener('scroll' ,this.hadnlerScroll)
  },
  destroyed(){
    window.removeEventListener('scroll' ,this.hadnlerScroll)
  },
  components: {
    headImg,
    BaiduMap,
    BmView,
    BmMarker
  },
  methods: {
    handler({Bmap,map}){
        console.log(Bmap,map)
    },
    hadnlerScroll(){
      var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      var jumps = document.getElementsByClassName("contact")[0].offsetTop
      if(jumps >scrollTop ){
        document.getElementsByClassName("bmView")[0].classList.add("animated","slideInLeft");
        this.$refs.userInfo.classList.add("animated", "slideInRight");
      }
      
    },
    jumpsTo(){
      //滑轮跳转到指定的地方
      var el = document.getElementById("aboutus")
      this.$nextTick(() =>{
        window.scrollTo({"behavior":"smooth","top":el.offsetTop -60});
      })

    },
    getLocationPoint(e) {
        this.$alert('当前位置的经度为:'+e.point.lng + '纬度为:' +e.point.lat, '坐标选择', {
          confirmButtonText: '确定',
          type: 'warning',
          callback: action => {
            if(action == 'confirm'){
                action = '坐标设置成功'
                this.$emit('closeMap')
            }else{
                action='取消设置'
            }
            this.$message({
              type: 'info',
              message: `${ action }`
            });
          }
        });
        this.$emit('setLocation',e.point);
    }
  },
};
</script>

<style lang="scss" scoped>

.us {
  .main {
    width: 60%;
    margin: 20px auto;

    h3 {
      font-size: 20px;
      text-align: left;
      font-size: 28px;

      i {
        color: red;
        padding-right: 15px;
      }
    }

    .contact {
      margin: 35px 0;
      height: 500px;
      display: flex;

      .bmView {
        width: 500px;
        height: 90%;

        .BMap_cpyCtrl {
          display: none !important;
        }
        .anchorBL {
          display: none !important;
        }
      }

      .usinfo {
        font-size: 20px;
        text-align: left;
        padding: 75px 120px;
        h5 {
          margin: 20px 0;
        }
        span {
          font-size: 18px;
        }
      }
    }
  }
}
</style>